<template>
	<view class="newItem" @click="toInfo">
		<view class="userData" v-if="newData.momentUserRsp">
			<image :src="newData.momentUserRsp.avatar?newData.momentUserRsp.avatar:'/static/images/logo.png'" mode="aspectFill"  @click.stop="toOther(newData.username)"></image>
			
			<view class="title" v-if="isfirst">{{ newData.momentUserRsp.nickname?newData.momentUserRsp.nickname:newData.momentUserRsp.username?newData.momentUserRsp.username:newData.momentUserRsp.realname}}</view>
			<view class="title" v-else>{{ newData.momentUserRsp.realname?newData.momentUserRsp.realname:newData.momentUserRsp.nickname?newData.momentUserRsp.nickname:newData.momentUserRsp.username}}</view>
			<view class="desc">{{ newData.postTime }}</view>
		</view>
		
		
		<view class="main" >
			<view class="box">
				<view class="textbox">
					<view class="text">{{ newData.title }}</view>
					<view class="descs" >{{ newData.content }}</view>
				</view>
				
			</view>
		</view>
		<view class="imglist" v-if="newData.images && newData.images.length > 0">
			<image @click.stop="priveImg(newData.images,index2)" :key="index2" v-for="(item2,index2) in newData.images" :src="item2" mode="widthFix"></image>
		</view>
		
		<view v-if="newData.videos && newData.videos.length > 0">
		<!-- @play="videoPlay()" -->
			<video :enable-play-gesture="true" :id="'video'+newIndex"   @play="videoPlay()" :poster="newData.posterUrl" object-fit="cover" @click.stop style="width: 500px; height: 300px;border-radius: 20rpx;"
				:src="newData.videos[0]" :autoplay="false"></video>
		</view>
		
		<!-- <view class="main" v-else>
			<view class="title">
				{{ newData.title }}
			</view>
			<view class="imgBox">
				<image style="height: auto;" v-if="newData.type == 'video'" class="bofang" src="../static/bofang.png"
					mode="widthFix"></image>
				<image class="posterUrl" :src="newData.posterUrl" mode="widthFix" style="width: 100%;height: auto;">
				</image>
			</view>
		</view> -->

		
		<view class="iconlist" >
			<view class="li" @click.stop="deleteArticle()" v-if="showDelete">
				<i class="iconfont">&#xe718;</i>
				<text class="info-text">删除</text>
			</view>
			
			<view class="li" @click.stop="share" v-if="!isdraft">
				<i class="iconfont">&#xe681;</i>
				<text class="info-text">分享</text>
			</view>
			<view class="li" @click.stop="toInfo(1)" v-if="!isdraft">
				<i class="iconfont">&#xe67a;</i>
				<text class="info-text">{{ newData.commentCount }}</text>
			</view>
			<view class="li" @click.stop="$u.throttle(fabulous, 1500)" v-if="!isMylife && !isdraft">
				<i class="iconfont iconRed" v-if="newData.myLike">&#xec8c;</i>
				<i class="iconfont" v-else>&#xec7f;</i>
				<text class="info-text">{{ newData.likeCount }} </text>
			</view>

			<view class="li" @click.stop="$u.throttle(myFavorite, 1500)" v-if="!isMylife && !isdraft">
				<i class="iconfont iconRed" v-if="newData.myFavorite">&#xe86d;</i>
				<i class="iconfont" v-else>&#xe8ba;</i>
				<text class="info-text">收藏</text>
			</view>

			<view class="li" v-if="isMylife">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
			
		},
		props: {
			isfirst:{
				type: Boolean,
				default: false
			},
			ispinglun:{
				type: Boolean,
				default: false
			},
			showDelete: {
				type: Boolean,
				default: true
			},
			tabname: {
				type: String,
				default: ''
			},
			myarticle: {
				type: Boolean,
				default: false
			},
			zhuiyi: {
				type: Boolean,
				default: false
			},
			isdraft: {
				type: Boolean,
				default: false
			},
			new: {
				type: Object,
				default: {}
			},
			newIndex: {
				type: Number,
				default: 0
			},
			isMylife: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			new: {
				handler(newVal, oldVal) {
					console.log('newVal')
					console.log(newVal)
					this.newData = newVal
				},
				deep:true
			}
		},
		data() {
			return {
				newData: this.new,
				username:uni.getStorageSync('username')?uni.getStorageSync('username'):''
			};
		},
		onLoad() {},
		methods: {
			videoPlay(){
				console.log('videoPlay');
				this.$emit('friendVideoPlay',this.newIndex)
			},
			videoPause() {
				let video = uni.createVideoContext("video" + this.newIndex,this)
				console.log("video" + this.newIndex + ' pause');
				video.pause();
			},
			priveImg(arr,index){
				uni.previewImage({
					urls:arr,
					current:index
				})
			},
			toOther(username){
				uni.navigateTo({
					url:`/pagesfriend/tabbar/other?username=${username}`
				})
			},
			share() {
				// #ifdef H5
				this.$Show.show('暂不支持')
				// #endif

				// #ifdef MP-WEIXIN
				this.$emit('share', this.newData)
				// #endif
			},
			toMy() {

				if (this.tabname == '分享') {
					return
				}
				let myFamilyData = uni.getStorageSync('myFamilyData')

				console.log(this.newData)
				console.log(myFamilyData)

				// let id = this.newData.userRsp.docId
				let username = this.newData.userRsp.username ? this.newData.userRsp.username : ''
				if (username) {
					uni.navigateTo({
						url: `/pages/card/index?username=${username}&type=1`
					})
				}

				// if(this.newData.username == myFamilyData.username){
				// 	uni.switchTab({
				// 		url:'/pages/tabbar/mine/mine'
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:`/pages/tabbar/mine/othermine?username=${this.newData.username}`
				// 	})
				// }



			},
			deleteArticle() {
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: res => {
						if (res.confirm) {
							let data = {
								momentId: this.newData.docId
							}
							this.$api2.momentdeleteMoment(data).then(res => {
								this.$Show.show('删除成功');
								this.$emit('delOver', this.newIndex)
							});

						}
					}
				});
			},
			toPage(url) {
				console.log(url);
			},
			myFavorite() {
				
				let data = {
					momentId:this.newData.docId,
					favorite:true
				}
				
				if (this.newData.myFavorite) {
					data.favorite = false;
				}
				
				uni.showLoading({
					title: '加载中...'
				});
				this.$api2.favoriteUnFavoriteMoment(data).then(res => {
					if (data.favorite) {
						this.$Show.show('收藏成功');
					} else {
						this.$Show.show('取消成功');
					}
					uni.hideLoading();
					this.newData.myFavorite = !this.newData.myFavorite;
					this.$forceUpdate();
				});
				
				
			},
			fabulous() {
				let data = {
					like: true,
					momentId: this.newData.docId
				};
				if (this.newData.myLike) {
					data.like = false;
				}
				this.$api2.likeUnlikeMoment(data).then(res => {
					if (data.like) {
						this.$Show.show('点赞成功');
						this.newData.likeCount++;
					} else {
						this.newData.likeCount--;
					}

					this.newData.myLike = !this.newData.myLike;
					console.log(this.newData)
					// this.$set(this.newData,"myLike",!this.newData.myLike)
					this.$forceUpdate();
				});
			},
			collection() {

			},
			toInfo(type) {
				
				let momentUserRsp = JSON.stringify(this.newData)
				uni.navigateTo({
					url:`/pagesfriend/tabbar/info?id=${this.newData.docId}&momentUserRsp=${momentUserRsp}`
				})
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	.imglist{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		image{
			width: 30%;
			height: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.newItem {
		background-color: #fff;
		padding: 30rpx;
	}

	.userData {
		position: relative;
		padding-left: 100rpx;
		margin-bottom: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 3px;
		}

		.desc {
			font-size: 24rpx;
			color: #979696;
		}
	}

	.main {
		padding-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			margin-top: 30rpx;
		}

		.imgBox {
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;

			.posterUrl {
				border-radius: 10rpx;
			}

			.bofang {
				position: absolute;
				width: 100rpx;
				left: 50%;
				opacity: .8;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
			}
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.textbox {
				display: flex;
				flex-direction: column;

				.descs {
					font-size: 26rpx;
					color: #7c7c7c;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.text {
				font-size: 32rpx;
			}

			.image {
				margin-left: 20rpx;

				image {
					width: 240rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.iconlist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.li {
			display: flex;
			align-items: center;
			flex-direction: row;
			color: #333;

			.iconfont {
				margin-right: 10rpx;
			}

			.iconRed {
				color: #de4849;
			}

			.info-text {
				font-size: 28rpx;
			}
		}
	}
</style>